<template>
	<view class='shop-cart background'>
		<!--自定义导航栏-->
		<view class='nav-bar'>
			<text class="nav-text" @click='toggleEditMode'>{{isEditMode ? '完成' : '编辑'}}</text>
		</view>

		<!--商品内容-->
		<view class='shop-list'>
			<view class='shop-item' v-for='(item,index) in list' :key='index'>
				<label class="radio">
					<radio value="" color="#FF3333" :disabled='!isEditMode' /><text></text>
				</label>
				<image class='shop-img' :src="item.imgUrl" mode=""></image>
				<view class='shop-text'>
					<view class='shop-name'>{{item.name}}</view>
					<view class='shop-color f-color'>{{item.color}}</view>
					<view class='shop-price'>
						<view>¥{{item.pprice}}</view>
						<view>*{{item.num}}</view>
					</view>
				</view>
			</view>
		</view>
		<!--底部-->
		<view class='shop-foot'>
			<label class="radio foot-radio">
				<radio value="" color='#FF3333' :disabled='!isEditMode' /><text>全选</text>
			</label>
			<view class='foot-total'>
				<view class='foot-count'>合计：<text class='f-active-color'>¥0</text></view>
				<view class='foot-num'>结算(0)</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isEditMode: false,
				list: [{
						checked: false,
						id: 1,
						name: "打客服的和非恶搞认为微软业务打客服的和非恶搞认为微软业务",
						color: "颜色：返回对方的过分的",
						imgUrl: "../../static/img/index-img/qunzi1.jpg",
						pprice: "27",
						num: 1
					},
					{
						checked: false,
						id: 2,
						name: "打客服的和非恶搞认为微软业务打客服的和非恶搞认为微软业务",
						color: "颜色：返回对方的过分的",
						imgUrl: "../../static/img/index-img/qunzi1.jpg",
						pprice: "27",
						num: 1
					},
					{
						checked: false,
						id: 2,
						name: "打客服的和非恶搞认为微软业务打客服的和非恶搞认为微软业务",
						color: "颜色：返回对方的过分的",
						imgUrl: "../../static/img/index-img/qunzi1.jpg",
						pprice: "27",
						num: 1
					}
				]
			}
		},
		components: {

		},
		methods: {
			toggleEditMode() {
				this.isEditMode = !this.isEditMode;
			}
		}
	}
</script>
<style scoped>
	/* 页面背景 */
	.background {
		background-image: url("https://b-ssl.duitang.com/uploads/item/201406/24/20140624173037_eJd2t.thumb.700_0.jpeg");
		/* 覆盖整个背景区域 */
		background-size: cover;
		/* 背景图片居中显示 */
		background-position: center;
	}

	/* 顶部 */
	.nav-bar {
		display: flex;
		justify-content: flex-end;
		margin-top: 90px;
	}

	.nav-text {
		background-color: #49BDFB;
		color: #FFFFFF;
		padding: 5px 10px;
		border-radius: 5px;
		right: 0;
	}

	.shop-list {
		padding-bottom: 100px;
	}

	.shop-item {
		display: flex;
		padding: 10px;
		align-items: center;
		background-color: #F7F7F7;
		margin-bottom: 5px;
	}

	.shop-img {
		width: 150px;
		height: 150px;
	}

	.shop-text {
		flex: 1;
		padding-left: 10px;
	}

	.shop-color {
		font-size: 12px;
	}

	.shop-price {
		display: flex;
		justify-content: space-between;
	}

	.shop-foot {
		border-top: 1px solid #F7F7F7;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 50px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.foot-radio {
		padding-left: 10px;
	}

	.foot-total {
		display: flex;
	}

	.foot-count {
		line-height: 50px;
		padding: 0 10px;
		font-size: 16px;
	}

	.foot-num {
		background-color: #49BDFB;
		color: #FFFFFF;
		padding: 0 30px;
		line-height: 50px;
	}
</style>